<template>
  <view class="clue">
    <view v-if="user.userInfo.serviceProviderFlag === 1" class="clue-left mr-16rpx">
      <view class="top flex flex-items-center">
        <text class="top-title text-28rpx text-#727687">待我接单</text>
        <uv-icon name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-index-hot.svg" class="ml-8rpx" size="32"></uv-icon>
      </view>
      <text class="text-#1C213E text-48rpx fw-600">{{ freshClueCount }}</text>
      <view class="order px-24rpx py-8rpx mt-20rpx">
        <view class="flex" @click="handleTakeOrder">
          <text class="title text-#1484EE line-height-normal text-24rpx mr-8rpx fw-500">去接单</text>
          <uv-icon
            name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/custom-arrow-right.svg"
            color="#1484EE"
            size="12"
          ></uv-icon>
        </view>
      </view>
      <view class="bg-img">
        <image
          class="w-232rpx h-232rpx"
          src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-index-wait-for-me-order.svg"
        ></image>
      </view>
    </view>
    <view
      :class="{
        'clue-right': true,
        'flex': true,
        'flex-col': user.userInfo.serviceProviderFlag === 1,
        'flex-justify-between': true
      }"
    >
      <view
        :class="{
          'header': true,
          'bg-#FFFFFF': true,
          'flex': true,
          'flex-justify-between': true,
          'mb-16rpx': user.userInfo.serviceProviderFlag === 1,
          'mr-16rpx': user.userInfo.serviceProviderFlag === 0
        }"
        @click="handleReleaseClues('left')"
      >
        <view class="left">
          <view class="title flex">
            <text class="text-#727687 text-28rpx flex-items-center mr-8rpx">发布线索</text>
          </view>
          <view class="mt-18rpx text-#1C213E font-bold text-32rpx">{{ publishClueCount }}条</view>
          <view class="flex mt-32rpx">
            <text class="text-#1484EE text-24rpx fw-500 mr-8rpx">去发布</text>
            <uv-icon
              name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/custom-arrow-right.svg"
              class="mt-4rpx"
              color="#1484EE"
              size="12"
            ></uv-icon>
          </view>
        </view>
        <view class="flex flex-items-center flex-justify-around">
          <uv-icon
            name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-index-release-clues.svg"
            color="#727687"
            size="60"
          ></uv-icon>
        </view>
      </view>
      <view class="footer" @click="handleReleaseClues('right')">
        <view class="left">
          <view class="top flex flex-justify-between">
            <view class="title flex">
              <text class="text-#727687 text-28rpx flex-items-center mr-8rpx">可提现佣金</text>
            </view>
          </view>
          <view class="mt-18rpx">
            <text class="text-#1C213E font-bold text-32rpx">￥{{ amountTransfer(user.userInfo.commissionAmount, 0) }}</text>
          </view>
          <view class="flex" @click.stop="handleCommissionRulesOpen">
            <uv-icon
              name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-warning-white.svg"
              color="#ffffff"
              size="16"
              class="mt-28rpx"
            ></uv-icon>
          </view>
        </view>
        <view class="flex flex-items-center flex-justify-around">
          <uv-icon
            name="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-index-available-commission.svg"
            color="#727687"
            size="60"
          ></uv-icon>
        </view>
      </view>
    </view>
    <!--佣金规则-->
    <commission-rule-modal-box ref="commissionRulesRef"></commission-rule-modal-box>
  </view>
</template>

<script name="clueList" setup>
import { amountTransfer } from '@/utils/tools';
import { onLoad } from '@dcloudio/uni-app';
import { getProviderPublishClueCount, getProviderFreshClueCount } from '@/api/index.js';
import commissionRuleModalBox from '@/pages/index/components/commission-rule-modal-box.vue';

const props = defineProps({
  user: {
    type: Object,
    default: () => {}
  }
});

const publishClueCount = ref(0);
const freshClueCount = ref(0);

const commissionRulesRef = ref();
const handleCommissionRulesOpen = () => {
  commissionRulesRef.value.handleCommissionRules();
};

// 去接单
const handleTakeOrder = () => {
  uni.navigateTo({
    url: '/subClue/pages/receivingOrder'
  });
};

// 发布线索
const handleReleaseClues = (type) => {
  uni.navigateTo({
    url: type === 'left' ? '/subClue/pages/release' : '/subCommission/pages/backCommission'
  });
};

// 获取渠道商发布线索数量
const queryProviderPublishClueCount = async () => {
  const { data } = await getProviderPublishClueCount();
  publishClueCount.value = data.publishClueCount;
};

// 获取渠道商线索数量 新线索
const queryProviderFreshClueCount = async () => {
  const { data } = await getProviderFreshClueCount();
  freshClueCount.value = data.freshClueCount;
};
// 关闭佣金规则
const handleClose = () => {
  commissionRulesRef.value.close();
};

onLoad(() => {
  queryProviderPublishClueCount();
  queryProviderFreshClueCount();
});
</script>

<style lang="scss" scoped>
.clue {
  display: flex;
  margin-bottom: 40rpx;
  &-left {
    flex: 1;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #ffffff;
    // position: relative;
    overflow: hidden;
    padding: 24rpx;
    // background: linear-gradient(180deg, rgba(29, 138, 241, 0.03) 0%, rgba(255, 255, 255, 1) 45%);
    .top {
      &-title {
        line-height: 32rpx;
      }
      .hot {
        border-radius: 2px;
        background-color: #f94b4a;
        line-height: 24rpx;
      }
    }
    .order {
      width: 112rpx;
      height: 46rpx;
      color: #1484ee;
      background: rgba(0, 123, 255, 0.05);
      border-radius: 99px 99px 99px 99px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .bg-img {
      position: relative;
      right: -100rpx;
      bottom: -24rpx;
      width: 232rpx;
      height: 232rpx;
    }
  }
  &-right {
    flex: 1.2;
    .header {
      flex: 1;
      border-radius: 4px 4px 4px 4px;
      padding: 36rpx 24rpx;
      border: 1px solid #ffffff;
      // background: linear-gradient(180deg, rgba(29, 138, 241, 0.03) 0%, rgba(255, 255, 255, 1) 50%);
      .left {
        .title {
          line-height: 32rpx;
        }
      }
    }
    .footer {
      flex: 1;
      border-radius: 4px 4px 4px 4px;
      padding: 36rpx 24rpx;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #ffffff;
      display: flex;
      // background: linear-gradient(180deg, rgba(29, 138, 241, 0.02) 0%, rgba(255, 255, 255, 1) 50%);

      .top {
        .title {
          line-height: 36rpx;
        }
      }
    }
  }
}

.close {
  position: absolute;
  right: 136rpx;
}
</style>
